<template>
  <div class="main-page">
    <div style="position: absolute; right: 20px; top: 20px">
      <el-button 
        type="danger" 
        @click="handleDeleteAccount" 
        style="margin-right: 10px">
        注销用户
      </el-button>
      <el-button 
        type="info" 
        @click="handleLogout">
        退出系统
      </el-button>
    </div>
    <h1 class="system-title">智序系统</h1>
    
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card class="welcome-card">
          <h2>欢迎使用智序生产排产系统</h2>
          <p class="welcome-text">
            智序系统是一款专业的智能生产排产管理系统，帮助您优化生产流程、提高设备利用率、降低生产成本。
          </p>
          
          <el-divider />
          
          <h3>系统功能</h3>
          <el-row :gutter="20">
            <el-col :span="8" v-for="feature in features" :key="feature.title">
              <el-card shadow="hover" class="feature-card" @click="$router.push(feature.route)">
                <div class="feature-icon">
                  <el-icon :size="40" :color="feature.color">
                    <component :is="feature.icon" />
                  </el-icon>
                </div>
                <h4>{{ feature.title }}</h4>
                <p>{{ feature.description }}</p>
              </el-card>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useAuthStore } from '@/stores/auth'
import { ElMessageBox, ElMessage } from 'element-plus'
import {
  Calendar,
  DataBoard,
  Setting,
  Operation,
  Goods,
  User,
  Box
} from '@element-plus/icons-vue'

const authStore = useAuthStore()

const handleLogout = async () => {
  try {
    await authStore.logout()
    ElMessage.success('已成功退出系统')
  } catch (error) {
    ElMessage.error(error.message || '退出系统失败')
  }
}

const handleDeleteAccount = async () => {
  try {
    await ElMessageBox.confirm('确定要注销当前用户吗？此操作将删除您的账户且无法恢复', '警告')
    await authStore.deleteAccount()
    ElMessage.success('账户已注销')
  } catch (error) {
    // 用户取消操作
  }
}

const features = ref([
  {
    title: '智能排产',
    description: '基于先进算法自动生成最优生产计划，最大化设备利用率',
    icon: Calendar,
    color: '#409EFF',
    route: '/scheduling'
  },
  {
    title: '订单管理',
    description: '全面管理客户订单，实时跟踪订单进度和生产状态',
    icon: DataBoard,
    color: '#67C23A',
    route: '/orders'
  },
  {
    title: '原料信息',
    description: '管理原料库存和使用情况，确保生产供应',
    icon: Goods,
    color: '#FFB6C1',
    route: '/materials'
  },
  {
    title: '设备监控',
    description: '实时监控设备状态和生产效率，预防性维护提醒',
    icon: Setting,
    color: '#909399',
    route: '/machines'
  },
  {
    title: '工艺管理',
    description: '维护产品工艺路线，优化生产流程',
    icon: Operation,
    color: '#F56C6C',
    route: '/crafts'
  },
  {
    title: '库存信息',
    description: '跟踪产品库存情况，优化库存水平',
    icon: Box,
    color: '#E6A23C',
    route: '/stocks'
  }
])
</script>

<style scoped>
.system-title {
  text-align: center;
  margin-bottom: 20px;
  color: #409EFF;
}

.welcome-card {
  margin-top: 20px;
  min-height: 500px;
}

.welcome-text {
  font-size: 16px;
  color: #606266;
  text-align: center;
  margin: 20px 0;
}

.feature-card {
  text-align: center;
  margin-bottom: 20px;
  height: 180px;
}

.feature-icon {
  margin: 15px 0;
}

.feature-card h4 {
  margin: 10px 0;
  color: #303133;
}

.feature-card p {
  color: #909399;
  font-size: 14px;
  margin: 10px 0;
}
</style>